//页面数据
var data = [
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '护理异常',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗医技',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '输血不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: 'ICU病房',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },

  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '药物不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗医技',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '药物不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: 'ICU病房',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '药物不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '输血不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '护理异常',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗器械',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '护理异常',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: 'ICU病房',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '输血不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: 'ICU病房',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗医技',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '输血不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '护理异常',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '药物不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗器械',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '输血不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗医技',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗器械',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: 'ICU病房',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '护理异常',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗器械',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗医技',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '药物不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '护理异常',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '护理异常',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: 'ICU病房',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗医技',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '输血不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: 'ICU病房',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '医疗医技',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
  {
    id: 'GRBL20180319102942699',
    state: '审批不通过',
    classification: '输血不良',
    reported: '2018-04-12',
    rejected: '2018-04-16',
  },
]
//当前的页码
var page = 1
//每页的条数
var count = 15
//获取tbody
var oTBody = document.querySelector('tbody')
//获取分页容器
var oPagination = document.querySelector('.pagination')
//获取上一页的按钮
var oPrevBtn = document.querySelector('.prev')
//获取下一页的按钮
var oNextBtn = document.querySelector('.next')
//获取搜索到输入框
var oSearchInp = document.querySelector('.searchInp')
//获取搜索按钮
var oSearchBtn = document.querySelector('.button1')
//页面初始化的渲染功能
function render() {
  //查看搜索框的内容
  var str = oSearchInp.value
  var searchData = [] //搜索后的数据
  if (str.trim() == '') {
    //没有搜索内容，全部都要
    searchData = data
  } else {
    for (var i = 0; i < data.length; i++) {
      //如果符合，放入渲染数据中
      if (data[i].classification.includes(str)) {
        searchData.push(data[i])
      }
    }
  }

  //让table为空
  oTBody.innerHTML = ''
  var renderArr = searchData.slice((page - 1) * count, page * count)
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement('tr')
    oTr.innerHTML = `
  <td >${renderArr[i].id}</td>
  <td>${renderArr[i].state}</td>
  <td>${renderArr[i].classification}</td>
  <td>${renderArr[i].reported}</td>
  <td>${renderArr[i].rejected}</td>
  <td class="btnFather">
      <button class="tR-Btn">查看</button>
  </td>
  `
    //把tr创建到tbody里面
    oTBody.appendChild(oTr)
  }
  //渲染页码
  var aPageBtn = document.querySelectorAll('.pageBtn')
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode)
  }
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    var oLi = document.createElement('li')
    oLi.innerHTML = `<a class="pageBtn"  href="#">${i}</a>`
    // oLi.classList.add('pageBtn')
    if (i == page) {
      oLi.classList.add('active')
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild)
  }
}
render()

//给分也页加事件
oPagination.addEventListener('click', changePage)
function changePage() {
  if (event.target.className == 'pageBtn') {
    // var aPageBtn = document.querySelectorAll('.pageBtn')
    // for (var i = 0; i < aPageBtn.length; i++) {
    //   aPageBtn[i].parentNode.classList.remove('active')
    // }
    // event.target.parentNode.classList.add('active')

    page = event.target.innerText
    render()
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev)
oNextBtn.addEventListener('click', next)
function prev() {
  if (page > 1) {
    page--
    render()
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++
    render()
  }
}
//搜索
oSearchBtn.addEventListener('click', searchFn)
function searchFn() {
  //当前页码变成1
  page = 1
  render()
}
